<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        .content .light {
            background-color: white;
            color: black;
        }

        .dark {
            background-color: black;
            color: white;
        }
    </style>
</head>

<body>
    <!-- <input type="button" value="白天模式" onclick="change()">
    <div class="content">
        这是一段话 <br>
        这是一段话 <br>
        这是一段话 <br>
        这是一段话 <br>
        这是一段话
    </div> -->

    <div class="content" onclick="remove()">
        <p>这是一段话</p>
        <p>这是一段话</p>
        <p>这是一段话</p>
        <p>这是一段话</p>
        <p>这是一段话</p>
    </div>

    <script>
        // 删除节点
        function remove() {
            let div = document.querySelector('.content');
            let deletedP = div.removeChild(document.querySelector('p'));
            console.log(deletedP);
        }

        // // 将新增节点插入到指定节点之前
        // function add() {
        //     let div = document.querySelector('.content');
        //     let ps = document.querySelectorAll('p');
        //     let newP = document.createElement('p');
        //     newP.innerText = '这是新增的一段话';
        //     div.insertBefore(newP, ps[0]);
        // }


        // 新增节点
        // function add() {
        //     // 新增节点: 先创建节点，然后将节点添加到DOM树中
        //     let div = document.querySelector('.content');
        //     let p = document.createElement('p');
        //     p.innerText = '这是新增的一段话';
        //     div.appendChild(p);
        // }
        

        // // 需求：修改按钮文本，并修改样式
        // function change() {
        //     let divText = document.querySelector('.content');
        //     let button = document.querySelector('input');
        //     if (button.value === '白天模式') {
        //         divText.classList.add('dark');
        //         button.value = '黑夜模式';
        //     } else {
        //         divText.classList.remove('dark');
        //         button.value = '白天模式';
        //     }
        // }
    </script>
</body>
</html>